import { Navigate, useRoutes } from 'react-router-dom'
import { lazy, Suspense } from 'react'

// const Home = lazy(() => import('../pages/index/index'))
// const Index = lazy(() => import('../pages/home/index.tsx'))
const Index = lazy(() => import('../pages/home/home'))
const Picture = lazy(() => import('../pages/home/common/picture/index'))
const Weather = lazy(() => import('../pages/home/common/weather/index'))
const Music = lazy(() => import('../pages/home/common/music/index'))
const Fortune = lazy(() => import('../pages/home/common/fortune/index'))
const MyHot = lazy(() => import('../pages/home/common/hot/index'))
const Visitor = lazy(() => import('../pages/home/common/visitor/index'))
const Qrcode = lazy(() => import('../pages/home/common/qrcode/index'))

const RoterConfig = () => {
  const routes = useRoutes([
    // 默认路由
    {
      path: '/',
      element: <Navigate to="/index" />
    },
    {
      path: '/index',
      element: <Suspense><Index /></Suspense>
    },
    {
      path: '/index/picture',
      element: <Suspense><Picture /></Suspense>
    },
    {
      path: '/index/weather',
      element: <Suspense><Weather /></Suspense>
    },
    {
      path: '/index/music',
      element: <Suspense><Music /></Suspense>
    },
    {
      path: '/index/fortune',
      element: <Suspense><Fortune /></Suspense>
    },
    {
      path: '/index/hot',
      element: <Suspense><MyHot /></Suspense>
    },
    {
      path: '/index/visitor',
      element: <Suspense><Visitor /></Suspense>
    },
    {
      path: '/index/qrcode',
      element: <Suspense><Qrcode /></Suspense>
    },
  ])
  return routes
}

export default RoterConfig